<template>
	<view class="bg mine">
		<view class="mine-header flex-row p-30">
			<view class="flex-row align-center">
				<u-avatar size="60" :src="$userInfo.avatar"></u-avatar>
			</view>
			<view class="flex-column justify-center w-full ml-30" style="gap: 10rpx;">
				<template v-if="isLogin">
					<view class="flex-row align-center" style="gap: 10rpx;">
						<view class="fw-700">{{$userInfo.username}}</view>
						<view class="flex-row ml-10">
							<u-tag text="普通会员" size="mini" type="error"></u-tag>
						</view>
					</view>
					<view @click="copy($userInfo.code)" class="mt-10 copy_txt">邀请码：{{$userInfo.code}}</view>
				</template>
				<template v-else>
					<view @click="jumpPage()" class="fw-700 sub-size">登陆/注册</view>
				</template>
			</view>
		</view>
		<view class="p-30 mine-box">
			<view class="card p-30 flex-row">
				<view @click="jumpPage('/pages/mine/listing')" class="flex-sub flex-column align-center justify-center">
					<view class="gray-color">
						技术服务费
					</view>
					<view class="fw-700 sub-size mt-10">
						{{info.listing_fee}}
					</view>
				</view>
				<view class="flex-sub flex-column align-center justify-center">
					<view class="gray-color">
						总收益
					</view>
					<view class="fw-700 sub-size mt-10">
						{{info.profit}}
					</view>
				</view>
				<view class="flex-sub flex-column align-center justify-center">
					<view class="gray-color">
						直推收益
					</view>
					<view class="fw-700 sub-size mt-10">
						{{info.reward_fee}}
					</view>
				</view>
				<view @click="jumpPage('/pages/mine/withdraw-list')"
					class="flex-sub flex-column align-center justify-center">
					<view class="gray-color">
						已提现
					</view>
					<view class="fw-700 sub-size mt-10">
						{{info.withdraw_profit}}
					</view>
				</view>
			</view>

			<view class="mt-30">
				<view class="title">
					菜单
				</view>
				<view class="mt-30 card p-30 flex-column" style="gap: 30rpx;">
					<view @click="jumpPage('/pages/order/order')" class="flex-row align-center justify-between">
						<view>
							<u-icon name="order" size="24" label="我的订单"></u-icon>
						</view>
						<view class="">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<u-line color="#eee"></u-line>
					<view @click="jumpPage('/pages/mine/withdraw')" class="flex-row align-center justify-between">
						<view>
							<u-icon name="photo" size="24" label="直推收益"></u-icon>
						</view>
						<view class="">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<u-line color="#eee"></u-line>
					<view @click="jumpPage('/pages/mine/card')" class="flex-row align-center justify-between">
						<view>
							<u-icon name="bookmark" size="24" label="支付方式"></u-icon>
						</view>
						<view class="">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<u-line color="#eee"></u-line>
					<view @click="jumpPage('/pages/mine/listing')" class="flex-row align-center justify-between">
						<view>
							<u-icon name="list" size="24" label="技术服务费"></u-icon>
						</view>
						<view class="">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<u-line color="#eee"></u-line>
					<view @click="jumpPage('/pages/mine/edit')" class="flex-row align-center justify-between">
						<view>
							<u-icon name="list" size="24" label="修改密码"></u-icon>
						</view>
						<view class="">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="mt-30">
				<u-button @click="logout" type="error" :loading="loading" text="退出账号"></u-button>
			</view>
		</view>
		<page-tabbar :value="2" />

	</view>
</template>

<script>
	import Clipboard from 'clipboard';

	import {
		mineCenter
	} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	export default {
		mixins: [commonMixin],
		data() {
			return {
				loading: false,
				info: {
					profit: 0,
					reward_fee: 0,
					listing_fee: 0,
					withdraw_profit: 0,
				}
			}
		},
		computed: {
			...mapState([]),
		},
		onShow() {
			this.$store.dispatch('getUserInfo');
			this.initData();
		},
		onLoad() {},
		methods: {
			initData() {
				mineCenter().then(res => {
					console.log('res', res);
					this.info = res
				})
			},
			copy(text) {
				this.$u.toast('复制成功');
				const textarea = document.createElement('textarea');
				textarea.value = text;
				document.body.appendChild(textarea);
				textarea.select();
				try {
					const success = document.execCommand('copy');
					document.body.removeChild(textarea);
					// return success;
				} catch (err) {
					document.body.removeChild(textarea);
					throw err;
				}
			},
			logout() {
				let vm = this;
				vm.loading = true;
				uni.showModal({
					title: '温馨提示',
					content: '确定退出账号?',
					success(e) {
						if (e.confirm) {
							vm.loading = false;
							vm.$store.dispatch('setUserLogout');
							uni.reLaunch({
								url: '/pages/common/login'
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mine {
		padding-bottom: 120rpx;

		&-header {
			height: 400rpx;
			color: #fff;
			box-sizing: border-box;
		}

		&-box {
			margin-top: -100rpx;
		}
	}
</style>